<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layout 后台大布局 - Layui</title>
        <link rel="stylesheet" href="../../layui/css/layui.css">
        <script type="text/javascript" src="../../layui/layui.js"></script>
    </head>
    <body>
        <div id="test"></div>
        <script>
            //JavaScript代码区域
            layui.use(['element', 'util', 'laydate'], function() {
                var laydate = layui.laydate;
                //标注重要日子
                var ins1 = laydate.render({
                  elem: '#test',
                  width: 500,
                  mark: {
                    '0-0-14': '生日'
                    ,'0-0-31': '跨年' //每年12月31日
                    ,'0-0-10': '工资' //每个月10号
                    ,'0-0-15': '' //具体日期
                    ,'0-0-20': '预发' //如果为空字符，则默认显示数字+徽章
                    ,'0-0-21': '发布'
                  },position: 'static'
                  ,done: function(value, date){
                    if(date.date === 15){ //点击2017年8月15日，弹出提示语
                      ins1.hint('中国人民抗日战争胜利72周年');
                    }
                  }
                });
            });
        </script>
    </body>
</html>
